const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, './index.js'),
    resolve: {
        alias: {
            '@': path.resolve(__dirname, "./src"),
        }
    },
    output: {
        publicPath: './',
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    devServer: {
        static: path.resolve(__dirname, './dist'), // 将 ../dist 目录下的文件作为 web 服务的根目录。
        compress: true,
        port: 3000, // 设置端口号
        open: true, // 自动打开本地默认浏览器
        hot: true, // 开启热更新
        proxy: {
            
        },
        historyApiFallback: true
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/i,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "@babel/preset-env",
                            "@babel/preset-react",
                            "@babel/preset-typescript",
                        ],
                        plugins: [
                            [
                                "@babel/plugin-transform-runtime",
                                {
                                    regenerator: true,
                                },
                            ],
                        ],
                    },
                },
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                test: /\.vue$/,
                use: [
                    'vue-loader',
                ]
            },
            {
                test: /\.(png|jpg|gif|svg|jpeg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        // limit代表图片最大的大小,图片小于limit时，在加载该图片时会将图片编译为base64形式的字符串
                        // 超过limit的图片会被压缩到dist文件夹中
                        limit: 12000,
                        // 对打包到dist文件的图片进行重新命名
                        // 加上中括号代表这是一个变量，根据要打包的图片进行相应的修改
                        // [name]代表图片名称；[hash:8]代表8位自动生成的哈希值；[ext]代表图片的后缀名
                        name: '[name].[hash:8].[ext]'
                    }
                }]
            },
            {
                test: /\.mdx?$/,
                use: ['babel-loader', '@mdx-js/loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 增加一个配置
            // 复制 '../index.html' 文件，并自动引入打包输出的所有资源（js/css）
            template: './public/index.html',
            favicon: path.resolve(__dirname,'./public/favicon.ico')
            // 压缩html资源
            // minify: {
            //   collapseWhitespace: true, //去空格
            //   removeComments: true // 去注释
            // }
        })
    ]
}